<template>
  <div class="tools-page">
    <div class="tool-section">
      <h3 class="section-title">工具</h3>
      <div class="tool-grid">
        <!-- 车型说明书 -->
        <router-link
          to="/iframes?url=https://c.cfmoto.com/ebook/h5/#/index?languageSign=zh&specificationId=222&sign=df3c34c66ff9000c136fb7a9f074a7ea"
          class="tool-card" active-class="active">
          <div class="card-media">
            <img src="@/assets/sms.png" alt="">
          </div>
          <div class="card-title">车型说明书</div>
        </router-link>

        <!-- 轮胎周长计算 -->
        <router-link to="/tire-calculator" class="tool-card" active-class="active">
          <div class="card-media">
            <img src="@/assets/luntai.png" alt="">
          </div>
          <div class="card-title">轮胎周长计算</div>
        </router-link>

        <!-- ABS齿圈计算器 -->
        <router-link to="/abs-calculator" class="tool-card" active-class="active">
          <div class="card-media">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="9" fill="none" stroke="#111827" stroke-width="1.4" />
              <circle cx="12" cy="12" r="5" fill="none" stroke="#111827" stroke-width="1.2" />
              <path d="M12 4v2M20 12h-2M12 20v-2M4 12h2" stroke="#111827" stroke-width="1" />
            </svg>
          </div>
          <div class="card-title">ABS齿圈计算器</div>
        </router-link>
      </div>

      <!-- 常见问题（整行大卡片） -->
      <router-link to="/faq-contact" class="faq-card" active-class="active">
        <div class="faq-title">常见问题</div>
        <div class="faq-icon">
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="24696" width="30" height="28">
            <path
              d="M1024 987.733333l-170.666667-72.533333H475.733333c-40.533333 0-72.533333-32-72.533333-72.533333V475.733333c0-40.533333 32-72.533333 72.533333-72.533333h475.733334c40.533333 0 72.533333 32 72.533333 72.533333v512zM475.733333 439.466667c-19.2 0-36.266667 17.066667-36.266666 36.266666v364.8c0 21.333333 17.066667 36.266667 36.266666 36.266667l394.666667 2.133333 117.333333 51.2V475.733333c0-21.333333-17.066667-36.266667-36.266666-36.266666H475.733333z"
              fill="#3295FF" p-id="24697"></path>
            <path
              d="M0 110.933333c0-40.533333 32-72.533333 72.533333-72.533333h475.733334c40.533333 0 72.533333 32 72.533333 72.533333v364.8c0 40.533333-32 72.533333-72.533333 72.533334H168.533333L0 620.8V110.933333z"
              fill="#3295FF" p-id="24698"></path>
            <path
              d="M418.133333 405.333333c19.2 12.8 36.266667 23.466667 53.333334 29.866667l-12.8 29.866667c-23.466667-8.533333-44.8-21.333333-68.266667-38.4-23.466667 12.8-51.2 19.2-76.8 19.2-27.733333 0-53.333333-6.4-76.8-21.333334-23.466667-12.8-40.533333-32-53.333333-57.6s-19.2-53.333333-19.2-83.2c0-32 6.4-59.733333 19.2-85.333333s29.866667-44.8 53.333333-57.6 49.066667-19.2 78.933333-19.2c29.866667 0 55.466667 6.4 78.933334 21.333333s40.533333 32 53.333333 57.6 19.2 53.333333 19.2 83.2c0 25.6-4.266667 49.066667-12.8 70.4-8.533333 17.066667-21.333333 36.266667-36.266667 51.2z m-91.733333-53.333333c23.466667 6.4 44.8 17.066667 59.733333 29.866667 23.466667-21.333333 36.266667-55.466667 36.266667-100.266667 0-25.6-4.266667-46.933333-12.8-66.133333-8.533333-19.2-21.333333-34.133333-38.4-44.8s-36.266667-14.933333-55.466667-14.933334c-32 0-57.6 10.666667-76.8 32s-29.866667 53.333333-29.866666 96c0 40.533333 10.666667 72.533333 29.866666 93.866667 19.2 21.333333 46.933333 32 76.8 32 14.933333 0 29.866667-2.133333 42.666667-8.533333-12.8-8.533333-25.6-14.933333-40.533333-17.066667-2.133333-2.133333 8.533333-32 8.533333-32z"
              fill="#FFFFFF" p-id="24699"></path>
            <path
              d="M584.533333 804.266667L706.133333 490.666667h44.8l128 313.6H832l-36.266667-96h-132.266666l-34.133334 96h-44.8z m89.6-128h106.666667l-32-87.466667c-8.533333-21.333333-14.933333-42.666667-21.333333-66.133333-4.266667 21.333333-10.666667 40.533333-17.066667 59.733333l-36.266667 93.866667z"
              fill="#3295FF" p-id="24700"></path>
          </svg>
        </div>
      </router-link>
    </div>
  </div>

</template>

<script setup>
</script>

<style scoped>
.tools-page {

  background: var(--bg);
  min-height: 100%;
  padding: 12px;
}

.tool-section {
  margin: 6px 6px 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 8px 6px 12px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  color: #111827;
  border-radius: 14px;
  padding: 12px 8px;
  min-height: 110px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.tool-card:active {
  transform: translateY(1px);
}

.tool-card .card-media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
}

.tool-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tool-card .card-title {
  font-size: 14px;
  line-height: 1.2;
}

.faq-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  color: #111827;
  border-radius: 14px;
  padding: 16px 14px;
  margin-top: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.faq-card .faq-title {
  font-size: 15px;
  font-weight: 600;
}

.faq-card .faq-icon {
  opacity: .85;
}

@media (max-width: 380px) {
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>